地图标注视图

最后更新时间：2019年7月5日

标注视图，即冒泡弹框的信息窗口，一般用于显示标注点的详细信息，如文字描述、图片等。标注视图实现方法如下：

(1) 创建标注：和创建固定点标注的方法完全一致；

(2) 实现地图视图的标注相关的监听，在viewForAnnotation:mapView:回调函数中执行标注视图的创建工作，根据标注对象构建标注视图，并赋予其他样式信息。

1 默认标注视图 Sample详情

默认标注视图具有固定默认的显示模板，只展示标题和描述信息。地图标注视图相关的监听事件包括5个，已展示在下列代码中，其中最关键的是viewForAnnotation:mapView:回调函数，需在其中创建标注视图。核心代码如下：

//实例化标注对象（参数：名称、描述、位置点、图标）
MGSAnnotation *annotation=[[MGSAnnotation alloc] initAnnotationWithTitle:@"中地数码" description:@"Annotation" point:dot image:image];
//绘制标注
[_mapView.annotationsOverlay addAnnotation:annotation];

//设置地图视图的代理
[_mapView setDelegate:self];

//地图标注视图事件监听
-(MGSAnnotationView *)viewForAnnotation:(MGSAnnotation *)annotation mapView:(MGSMapView *)mapView
{
    //创建标注视图
    MGSAnnotationView *annotationView=[[MGSAnnotationView alloc]initWithAnnotation:annotation];
    //设置标注视图偏移量、点击时移动到视图中心
    [annotationView setOffset:CGPointMake(3, -50)];
    [annotationView setIsPanToMapViewCenter:YES];
    return annotationView;
}

//地图标注点击事件监听
-(void)clickAnnotation:(MGSAnnotation *)annotation mapView:(MGSMapView *)mapView{
    NSLog(@"标注被点击");
}

//点击地图标注视图事件监听
-(void)clickAnnotationView:(MGSAnnotationView *)annView mapView:(MGSMapView *)mapView{
    NSLog(@"标注视图被点击");
}

//将要显示地图标注视图事件监听
-(bool)willShowAnnotationView:(MGSAnnotationView *)annView mapView:(MGSMapView *)mapView{
    NSLog(@"将显示标注视图");
    return false;
}

//将要隐藏地图标注视图事件监听
-(bool)willHideAnnotationView:(MGSAnnotationView *)annView mapView:(MGSMapView *)mapView{
    NSLog(@"将隐藏标注视图");
    return  false;
}

实现效果如下图所示：

2 自定义标注视图 Sample详情

用户可以自定义标注视图的显示样式，包括视图的布局、控件的样式等。自定义标注视图，可以在默认标注视图（标题与描述）的基础上增加左、右视图，同样也可以使用自定义布局完全代替原有视图，MGSAnnotationView类提供的接口如下所示：

自定义标注视图的实现方法与默认的类似，同样需要创建标注、实现标注监听事件。实现方法如下：

(1) 创建标注：和创建固定点标注的方法一样；

(2) 实现地图视图的标注相关的监听，在viewForAnnotation:mapView:回调函数中创建标注视图：可通过代码编写自定义标注视图的布局，也可通过界面化的方式创建自定义布局，设置完成后赋予其他样式信息即可。

具体实现代码如下：

//坐标点：作为标注位置
MGSDot dot=MGSDotMake(12735780.301316,3563458.653495);
//图像：作为标注的图标
UIImage *image=[UIImage imageNamed:@"annotation"];
//实例化标注对象（参数：名称、描述、位置点、图标）
MGSAnnotation *annotation=[[MGSAnnotation alloc] initAnnotationWithTitle:@"标注" description:@"Annotation" point:dot image:image];
//获取地图容器的标注图层，并向其中添加标注
[_mapView.annotationsOverlay addAnnotation:annotation];

//设置地图视图的代理
[_mapView setDelegate:self];

//地图标注视图事件监听
-(MGSAnnotationView *)viewForAnnotation:(MGSAnnotation *)annotation mapView:(MGSMapView *)mapView
{
    //创建标注视图
    MGSAnnotationView *annotationView=[[MGSAnnotationView alloc]initWithAnnotation:annotation];
    //设置偏移量、移动到视图中心、背景颜色
    [annotationView setOffset:CGPointMake(3, -50)];
    [annotationView setIsPanToMapViewCenter:YES];
    [annotationView setCalloutViewBackgroundColor:[UIColor whiteColor]];
    
    //自定义标题视图
    UILabel *titleLabel=[[UILabel alloc] initWithFrame:CGRectMake(70, 0, 90, 35)];
    [titleLabel setText:annotation.title];
    [annotationView setCalloutTitleTextLabel:titleLabel];
    //自定义描述视图
    UILabel *descriptionLabel=[[UILabel alloc] initWithFrame:CGRectMake(70, 35, 100, 35)];
    [descriptionLabel setText:annotation.description];
    [annotationView setCalloutDescriptionTextLabel: descriptionLabel];
    //设置图片
    UIImageView *leftImageview=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ic_zd"]];
    [annotationView setLeftCalloutAccessoryView:leftImageview];
    //右边视图
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(180, 0, 80, 80)];
    label.textColor = [UIColor blueColor];
    label.text = [NSString stringWithFormat:@"出发去:\r\n%@",annotation.title];
    label.font = [UIFont boldSystemFontOfSize:18];
    label.numberOfLines = 2;
    label.backgroundColor = [UIColor whiteColor];
    [annotationView setRightCalloutAccessoryView:label];
    
    //返回视图
    return annotationView;
}

实现效果如下图所示：